<script lang="ts" setup>
import { PrimaryKey } from '@/types';
import { computed, reactive, ref } from 'vue';

// typescript
const testList = ref([
  {id: 1, title: "Vivo Xplay 6", thumb: "", price: 1999.00, count: 1, params: ["藏蓝色", "256GB"]},
  {id: 2, title: "Vivo Xplay 6", thumb: "", price: 1999.00, count: 1, params: ["藏蓝色", "256GB"]},
  {id: 3, title: "Vivo Xplay 6", thumb: "", price: 1999.00, count: 1, params: ["藏蓝色", "256GB"]},
  {id: 4, title: "Vivo Xplay 6", thumb: "", price: 1999.00, count: 1, params: ["藏蓝色", "256GB"]},
  {id: 5, title: "Vivo Xplay 6", thumb: "", price: 1999.10, count: 1, params: ["藏蓝色", "256GB"]},
  {id: 6, title: "Vivo Xplay 6", thumb: "", price: 1999.07, count: 1, params: ["藏蓝色", "256GB"]},
  {id: 7, title: "Vivo Xplay 6", thumb: "", price: 1999.00, count: 1, params: ["藏蓝色", "256GB"]}
]);
const checkbox = ref([]);
const state = reactive({
  editStatus: false
});

// 获取已选中的商品
const getCheckedGoods = () => {
  const list: any[] = [];
  checkbox.value.forEach(x => {
    const find = testList.value.find(v => v.id == x);
    find && list.push(find);
  });

  return list;
}

// 总金额
const amount = computed(() => {
  const checkeds = getCheckedGoods();
  return checkeds.map(x => x.price * x.count)
  .reduce((a, b) => a + b, 0).toFixed(2);
});

// 切换编辑状态
const onUpdateEditStatus = () => {
  state.editStatus = !state.editStatus;
  // TODO 如果切换到编辑状态，将所有选中全部取消
}
</script>

<!-- 购物车 -->
<template>
  <view class="container">
    <view class="header">
      <view>
        <w-checkbox :icon-size="16" checked-color="#FF2121" independent :value="3">
          <text>商城自营</text>
        </w-checkbox>
      </view>
      <view>
        <text hover-class="hover-class" @click="onUpdateEditStatus">编辑</text>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="list-view">
      <template v-if="testList.length">
        <w-checkbox-group v-model:value="checkbox">
          <template v-for="(item, index) in testList" :key="index">
            <w-checkbox :value="item.id" label-disabled :icon-size="16" checked-color="#FF2121">
              <view class="item">
                <w-commodity-cart-item></w-commodity-cart-item>
              </view>
            </w-checkbox>
          </template>
        </w-checkbox-group>
      </template>
      <template v-else>
        <w-empty image="../../static/images/empty/shoppingcart.png" text="购物车还是空的"></w-empty>
      </template>
    </view>
    <!-- 结算栏 -->
    <view class="settlement-view">
      <view class="amount-view">
        <template v-if="!state.editStatus">
          <text>合计：</text>
          <text class="amount">￥{{ amount }}</text>
        </template>
      </view>
      <view class="button-view">
        <button v-if="!state.editStatus" hover-class="hover-class-opacity">结算(1)</button>
        <button v-else class="remove" hover-class="hover-class-opacity">移除</button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
$padding: 30rpx;
$header-height: 80rpx;
$footer-height: 120rpx;

@mixin position {
  width: calc(100% - 60rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $padding;
  position: fixed;
  left: 0;
  background-color: $border-color;
  z-index: 2;
}

.container {
  height: 100vh;
  background-color: $border-color;
  position: relative;
}

.header {
  height: 80rpx;
  @include position();
  top: 0;
}

.list-view {
  padding: $header-height 0 $footer-height;

  :deep(.w-checkbox-group) {
    background-color: #fff;
    padding: 0 $padding;
    .label-view {
      margin: 0;
    }
  }
  .w-empty {
    height: 100vh;
  }
}

.settlement-view {
  height: 120rpx;
  @include position();
  bottom: 0;
  background-color: #fff;

  .amount-view {
    text {
      color: $text-color;
      font-size: 28rpx;
    }
    .amount {
      font-size: 36rpx;
      color: $amount-color;
    }
  }

  .button-view {
    button {
      width: 240rpx;
      height: 88rpx;
      color: #fff;
      font-size: 36rpx;
      background-color: $primary-color;
      box-shadow: 0px 0px 10px #e2eeff;
      border-radius: 73px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .remove {
      background-color: $amount-color;
    }
  }
}
</style>
